<template>
	<view>
		<block v-for="(item,index) in goodsList" :key="index">
			<view class="cu-card article bg-white solid-bottom">
				<!-- <view class="cu-item margin shadow flex"> -->
				<navigator hover-class="none" :url="'/pages/goods/view?id=' + item.id">
					<view class="margin shadow flex">
						<view class="common-item">
							<image class="radius" :src="baseUrl + item.image" mode="aspectFill"></image>
						</view>
						<view class="flex padding-left flex-direction justify-between response flex-wrap">
							<view class="title text-content text-lg text-cut">{{item.goods_name}}</view>
							<view class="flex justify-between">

								<view>
									<view class="text-red text-price padding-bottom-xs text-bold text-xl">{{item.spec[0].goods_price}}</view>
									<view class="flex align-center">
										<text class="text-price text-bold">{{item.spec[0].line_price}}</text>
										<!-- <image class="vip-image margin-left-xs" src="../../static/vip.png" mode=""></image> -->
										<text class="text-gray text-sm padding-left-sm">已售898件</text>
									</view>
								</view>

								<view class="cart margin-top-sm">
									<text class="cuIcon-cart text-red text-xl"></text>
								</view>
							</view>
						</view>
					</view>
				</navigator>
			</view>
		</block>

		<view class="text-center padding bg-white">已全部加载</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.$api.baseUrl
			};
		},
		props: {
			goodsList: {
				type: Array,
				default: function() {
					return [];
				},
			}
		}
	}
</script>

<style lang="scss">
	.common-item {
		width: 180rpx;
		height: 180rpx;
		border-radius: 6upx 6upx 0 0;

		image {
			width: 180rpx;
			height: 180rpx;
		}

	}

	.title {
		width: 480upx;
	}

	.cart {
		width: 50rpx;
		height: 50rpx;
		border: 1rpx solid #e54d42;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;

		.cuIcon-cart {
			font-size: 36rpx;
		}
	}

	.vip-image {
		width: 46rpx;
		height: 22rpx;
	}
</style>
